<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>绿色未来环保公益平台</title>
		<link rel="stylesheet" href="css/cube.css" />
		<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css" />
		<style type="text/css">
			body{
				background: #efefef;
			}
			@font-face {
				font-family: 'iconfont';
				src: url('iconfont.eot');
				src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg');
			}
			@font-face {
			  font-family: 'xinxins';
			  src: url('font-seven/xinxins/iconfont.eot');
			  src: url('font-seven/xinxins/iconfont.eot?#iefix') format('embedded-opentype'),
			  url('font-seven/xinxins/iconfont.woff') format('woff'),
			  url('font-seven/xinxins/iconfont.ttf') format('truetype'),
			  url('font-seven/xinxins/iconfont.svg#iconfont') format('svg');
			}
			@font-face {
			font-family: 'xinxin';
			src: url('font-seven/xinxin/iconfont.eot');
			src: url('font-seven/xinxin/iconfont.eot?#iefix') format('embedded-opentype'),
			url('font-seven/xinxin/iconfont.woff') format('woff'), 
			url('font-seven/xinxin/iconfont.ttf') format('truetype'), 
			url('font/xinxin/iconfont.svg#iconfont') format('svg');
			}
			.topa{
				/*border: 1px solid red;*/
				width: 1220px;
				height: 60px;
				margin: 0 auto;
				background:#59AA3A ;
			}
			.topa .top-mid{
				
				width: 1000px;
				height: 60px;
				margin: 0 auto;
			}
			.topa .top-mid .logo{
				float: left;
				width: 60px;
				height: 60px;
				
				background: url(img-seven/logo.png);
				margin-right: 10px;
				
			}
			.topa .top-mid .weizi-one ul{
				float: left;
				margin: 0px;
				padding: 0px;
				
				/*width: 380px;*/
			}
			.topa .top-mid .weizi-one ul li {
				display:inline-block;
				width: 80px;
				height: 60px;
				
				margin: 0px;
				padding: 0px;
			}
			.topa .top-mid .weizi-one ul li:hover {
				background: #509D33;
			}
			.topa .top-mid .weizi-one ul li a{
				color: #fff;
				display:block;
				
				text-align: center;
				margin-top: 19px;
			}
			.topa .top-mid .weizi-two ul{
				float: left;
				width: 70px;
				margin-right: 10px;
			}
			.topa .top-mid .weizi-two ul li {
				display:inline-block;
				width: 90px;
				height: 60px;
				border-right:1px solid #419641 ;
			}
			.topa .top-mid .weizi-two ul li:hover {
				background-color: #509D33;
			}
			.topa .top-mid .weizi-two ul li a:hover {
				color: #ccc;
				transform:  all .5s;
			}
			.topa .top-mid .weizi-two ul li a{
				color: #fff;
				display:block;
				
				text-align: center;
				margin-top: 19px;
			}
			.topa .top-mid .weizi-three ul{
				float: right;
			}
			.topa .top-mid .weizi-three ul li {
				display:inline-block;
				width: 113px;
				height: 60px;
				border-right:1px solid #419641 ;
				padding: 0px;
				margin: 0px;
				
			}
			.topa .top-mid .weizi-three ul li:hover {
				background: #509D33;
			}
			.topa .top-mid .weizi-three ul li a{
				color: #fff;
				display:block;
				
				text-align: center;
				margin-top: 19px;
			}
			.topa .top-mid .weizi-three ul li a span{
				font-family: 'xinxins';
				color: #F1AD09;
				font-weight: bold;
			}
			.topa .top-mid .logo_one {
				float: left;
				
				width: 148px;
				height: 48px;
				margin-top:6px;
				
				margin-right: 10px;
			}
			.topa .top-mid .font_one a{
				font-family: 'xinxins';
				width: 20px;
				height:40px;
				
				float: left;
				font-size: 1.7em;
				color: #fff;
				margin-top: 13px;
				margin-right: 10px;
			}
			/*tou*/
			.iconfont {
				font-family: "iconfont" !important;
				font-size: 16px;
				font-style: normal;
				-webkit-font-smoothing: antialiased;
				-webkit-text-stroke-width: 0.2px;
				-moz-osx-font-smoothing: grayscale;
			}
			
			.wai {
				width: 1225px;
				/*border: 1px solid red;*/
				margin: 20px auto;
			}
			.top{
				/*border: 0px solid black;*/
				background: white;
				margin: 0px 120px 0px 44px;
				margin-top: 10px;
			}
			.top ul {
				margin: 0px 10px;
				padding: 0px;
			}
			.top  ul li {
				list-style: none;
				padding: 7px 10px;
				/*border: 0px solid black;*/
			}
			.top .lii li:first-child{
				
				margin-right: 10px;
			}
			.top .lii li:nth-child(2){
				background: #59AA3A;
				color: white;
			}
			.top .lii li {
				list-style: none;
				display: inline-block;
				font-size: 14px;
				color: #C2B0B0;
				/*float: left;*/
			}
			
			
			/**中间
			 * 热门
			 */
			
			
			.top_xia .middle_content ul li {
				float: left;
				margin: 10px 0px 0px 2px ;
				padding: 3px 9px;
				list-style: none;
				background: white;
				color: #C2B0B0;
				
			}
			.top_xia .middle_content ul li:first-child{
					background: #59AA3A;
					color: white;
			}
			.top_xia .middle_content ul{
				overflow: hidden;
			}
			li :hover{
				cursor: pointer;
			}
			
			
			/*
			 * main 开始
			 */
			.main{
				
				margin-left: 40px;
			}
			.main .main_box li{
				position: relative;
				
			}
			
			.main .main_box ul li img{
				width: 246px;
				height: 167px;
				
			}
			.main_box ul li {
				list-style: none;
				border: 0px solid blue;
				background: white;
				margin-right: 27px;
				margin-top: 27px;
				float: left;
			}
			.main_box ul li .img_content{
				margin: 0px 0px 70px 0px;
				font-size: 13px;
				
			}
			 .main_box ul li .img_content{  
                width: 246px;
				height: 167px;
                overflow: hidden;  
            } 
			.main_box ul li .img_content img{  
               /* cursor: pointer;  */
                transition: all 0.8s;  
            } 
			.main_box ul li .img_content img:hover {
                transform: scale(1.2);  
            }  
   			}
			.main_box .text_box{
				margin: 0px 10px;
			}
			.main_box ul li .head_count{
				font-size: 15px;
			}
			.main_box ul li .time_count{
				margin: 30px 0px 10px 0px; 
				color: #C2B0B0;
			}
			.main_box ul li .settle_count{
				color: #C2B0B0;
			}
			
			.main_box ul li .middle_img img{
				position: absolute;
				width: 71px;
				height: 71px;
				right: 87.5px;
				top: 131.5px;
				transform:rotate(0deg);
				transition: all .5s; 
				
			}
			
			.main_box ul li .middle_img img:hover{
				transform:rotate(360deg);
				transition: all .5s; 				
				
			}
			
			
			
			hr{
				margin : 20px 0px 70px 18px;
				color: #EFEFEF;
				width: 210px;
			}
			
			
			
			.main_box ul{
				overflow: hidden;
			}
			/**/
			.footer{
				/*border: 1px solid red;*/
				width: 1220px;
				height: 280px;
				margin: 0 auto;
			}
			.footer .footer_nei{
				/*border: 1px solid red;*/
				width: 1000px;
				height: 280px;
				margin: 0 auto;
				
			}
			.footer .footer_nei .footer_shang{
				display: inline-block;
			}
			.footer .footer_nei .footer_shang ul{
				border-bottom: 1px solid #E2E2E2;
				line-height: 45px;
				width: 1000px;
				margin-top: 20px;
			}
			.footer .footer_nei .footer_shang ul li{
				display: inline-block;
				/*border: 1px solid red;*/
				margin-right: 50px;
			}
			.footer .footer_nei .footer_shang ul li a{
				color: #8B8A8A;
				font-size: 16px;
			}
			.footer .footer_nei .footer_zhong{
				height: 50px;
				width: 1045px;
				margin-top: 35px;
				
			}
			.footer .footer_nei .footer_zhong h4{
				font-weight: bold;
				color: #4E4E4E;
			}
			.footer .footer_nei .footer_zhong span{
				color:#333333 ;
				display: inline-block;
				padding-right: 30px;
				line-height: 50px;
			}
			.footer .footer_nei .footer_zhong span:hover {
				color: #AEACAC;
				transform: all .5s;
			}
			.footer .footer_two{
				
				width: 1220px;
				height: 54px;
				margin: 0 auto;
				background-color:#59AA3A ;
			}
			.footer_two p{
				display: block;
				text-align: center;
				/*border: 1px solid red;*/
				padding-top: 15px;
				color: #FFFFFF;
				size: 14px;
			}
			.footer_two p a{
				
				color: #FFFFFF;
				size: 14px;
			}
		</style>
	</head>

	<body>
		<div class="wai">
		<div class="topa">
				<div class="top-mid">
					<div class="logo"></div>
					<div class="weizi-one">
						<ul>
							<li><a href="shouye.html">首页</a></li>
							<li><a href="zhongchou.html">众筹</a></li>
							<li><a href="huodong.html">活动</a></li>
							<li><a href="shetuan.html">社团</a></li>
							<li><a href="dongtai.html">动态</a></li>
							
						</ul>
					</div>
					<div class="logo_one">
						<a href="#">
							<img src="img-seven/contest.png" />
						</a>
					</div>
					<div class="font_one"><a href="#">&#xe61d;</a></div>
					<div class="weizi-two">
						<ul>
							<li><a href="#">登录</a></li>
						</ul>
					</div>
					<div class="weizi-three">
						<ul>
							<li>
								<a href="chenweihuoban.html">
									<span>&#xe607;</span>
								        成为伙伴
						        </a>
							</li>
							<li>
								<a href="guanyuwomen.html">
									<span>&#xe607;</span>
									关于我们
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!---->
		
			
			<div class="top">
				<ul>
					<li>
						<ul class="lii">
							<li> 时间: </li>
							<li>全部 </li>
							<li> 本周 </li>
							<li> 本月 </li>
							<li>指定日期 </li>
						</ul>
					</li>
					<a href="" class="icon"></a>
					<li>
						<ul class="lii">
							<li>城市:</li>
							<li>全部</li>
							<li> <select style="width: 100px; text-align: center; border:1px solid #C2B0B0; color: #C2B0B0;" name="">
								<option value="默认" selected="selected">选择城市</option>
								<option value="郑州">郑州</option>
								<option value="郑州">安阳</option>
								<option value="郑州">鹤壁</option>
								<option value="郑州">洛阳</option>
							</select>  </li>
						</ul>
					</li>
					<li>
						<ul class="lii">
							<li>费用:</li>
							<li>全部</li>
							<li>收费</li>
							<li>免费</li>
						</ul>
					</li>
					<li>

						<ul class="lii">
							<li>标签:</li>
							<li>全部</li>
							<li>植树防沙</li>
							<li>海洋保护</li>
							<li>垃圾分类</li>
							<li>绿色教育</li>
							<li>湿地保护</li>
							<li>清洁水源</li>
							<li>动物保护</li>
							<li>循环利用</li>
							<li>培训交流</li>
							<li>高校活动</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="top_xia">
				<div class="middle_content">
					<ul>
						<li><i class="iconfont">&#xe54c; 最新</i></li>
						<li><i class="iconfont">&#xe689; 热门</i></li>
					</ul>
				</div>

			</div>
			<div class="main">
				<div class="main_box">
					<ul>
						<li>
							<div class="img_content" >
								<img src="img/01.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								MyH2O第六期“吾水计划”测水
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/02.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								  志愿者  “科研监测”进城啦
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/03.dib"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
							“㵲水”、“舞水”我们都
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/04.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
							中华白海豚保护宣传活动
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/05.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								 带上娃一起拯救Blue Planet
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/06.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								MyH2O第六期“吾水计划”测水
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/07.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								“绿色·感恩”全国大型
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/08.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								跑冒滴漏
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/09.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								地球故事 | 给地球寄一封信
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/10.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								探寻人与海洋之美-海洋大赛
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/11.png"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								绿色上海 一起”520走报名啦！
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
						<li>
							<div class="img_content" >
								<img src="img/12.jpg"/>
							</div>
							<div class="middle_img">
								<img src="img/baoming.png"/>
							</div>
							<div class="text_box">
								<div class="head_count">
								蓝色小侦探 4.21 地球日
							</div>
							<div class="time_count">
								<i class="iconfont"> &#xe54c;</i>
								4月25日 00:00开始
							</div>
							<div class="settle_count">
								<i class="iconfont"> &#xe60e;</i>
								北京
							</div>
							</div>
							<hr />
						</li>
					</ul>
				</div>
			</div>
			<div class="footer">
				<div class="footer_nei">
					<div class="footer_shang">
						<ul>
							<li><a href="#">关于我们</a></li>
							<li><a href="#">问题中心</a></li>
							<li><a href="#">服务协议</a></li>
							<li><a href="#">免责条款</a></li>
						</ul>
					</div>
					<div class="footer_zhong">
						<h4>友情链接</h4>
						<a href="#">
						<span>中国环境文化促进会</span><span>上海通用</span><span>米公益</span><span>环评爱好者</span>
						<span>新公益</span><span>创意谷</span><span>长沙市野生动植物保护协会</span><span>壹起网</span>
						<span>绿色生命</span><span>创绿中心</span>
						</a>
					</div>
					<div class="footer_zhong">
						<h4>合作媒体</h4>
						<a href="#">
						<span>CCTV央视网</span><span>东方卫视</span><span>搜狐网</span><span>凤凰网</span>
						<span>腾讯网</span><span>亚洲环保网</span><span>股权众筹</span>
						</a>
					</div>
				</div>
				<div class="footer_two">
					<p><a href="#">Copyright &copy;2004-2018 www.drivetogreen.com 版权所有 网站备案/许可证号 沪ICP备13034092号-2<img src="img/beian.png"/> 沪公网安备 31010102004590号</a></p>
				</div>
			</div>
		</div>
	</body>

</html>